<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="home" routerLinkActive="active">基本动画</a>
      <a mat-list-item routerLink="complex" routerLinkActive="active">复杂动画</a>
      <a mat-list-item routerLink="reuse" routerLinkActive="active">可重用动画</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        >
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      
      <span>Angular7-animation</span>

      <!-- NAV -->
      <div class="links">
        <button mat-button routerLink="group" routerLink="mobile" routerLinkActive="active">
          <span>{{ 'group' | titlecase }}</span>
        </button>
      </div>
      <!-- NAV end -->

    </mat-toolbar>
    <!-- Add Content Here -->
    
    <div class="container">
      <router-outlet></router-outlet>
    </div>

  </mat-sidenav-content>
</mat-sidenav-container>
